﻿@model Dropdownlist.ViewModel.MenuViewModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menulevel1').change(function () {
                var categoryIdLevel1 = $('#menulevel1 option:selected').val();
                $.ajax({
                    type: 'GET',
                    data: { id: categoryIdLevel1 },
                    url: '@Url.Action("FilterCatLevel2", "Menu")',
                    success: function (result) {
                        var s = '';
                        for(var i = 0;i< result.length; i++)
                        {
                            s += '<option value ="' + result[i].Value + '">' + result[i].Text + '</option>';
                        }
                        $('#menulevel2').html(s);
                    }
                });
            });
        });


    </script>
    <style type="text/css">
        .myformat{
            width:100px;
        }
    </style>
</head>
<body>
    <div> 
        @using (Html.BeginForm("", "", FormMethod.Post))
        {
            <table cellpadding="2" cellspacing="2" border="1">
                <tr>
                    <td>MenuLer 1</td>
                    <td>@Html.DropDownListFor(m=>m.CategoryIdLevel1,Model.MenuLevel1,new {id="menulevel1", @class ="myformat" })</td>
                    <td>MenuLer 2</td>
                    <td>@Html.DropDownListFor(m => m.CategoryIdLevel2, Model.MenuLevel2,null,new  {id="menulevel2" , @class = "myformat" })</td>
                    
                    <td>&nbsp;</td>
                    <td><input type="submit" value="Save"/></td>
 


                 </tr>
            </table>
        }


    </div>
</body>
</html>
